
<!-- 
用户协议弹出
 themeColor 是绑定在 vuex 里的。
 <router-link data-theme="" to="/bundle/pages/server_explan/server_explan?type=1">
 	<view class="agreement">《{{ AgreemenName || "服务协议" }}》</view>
 </router-link>
 和
 <router-link to="/bundle/pages/server_explan/server_explan?type=2">
 	<view class="agreement">《{{ AgreemenUserName || "隐私协议" }}》</view>
 </router-link>
 -->
<template>
	<view>
		<view @click="openModal">
			<slot></slot>
		</view>
		<u-modal 
			:value="show" 
			show-cancel-button 
			:show-title="false"
		    @confirm="confirm" 
			@cancel="cancel" 
			:confirm-color="themeColor">
		    <view class="comfirm-box">
		        <view> 我已阅读并同意 </view>
		        <view class="flex row-center">
					<router-link data-theme="" to="/pagesUser/pages/server_explan/server_explan?type=1">
						<view class="agreement">《{{ agreemenName || "服务协议" }}》</view>
					</router-link>
					和
		            <router-link to="/pagesUser/pages/server_explan/server_explan?type=2">
		            	<view class="agreement">《{{ agreemenUserName || "隐私协议" }}》</view>
		            </router-link>
				<!-- 	<router-link data-theme="" to="/bundle/pages/server_explan/server_explan?type=1">
					    <view class="agreement">《用户注册及网站服务协议》</view>
					</router-link> -->
		        </view>
		    </view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name:"user-agreement-modal",
		props: {
			// 是否同意的值
			isAgree: {
				type: Boolean,
				default: false
			},
			// 是否显示
			visible: {
				type: Boolean,
				default: false
			},
			agreemenName:{
				type: String,
				default: '服务协议'
			},
			agreemenUserName: {
				type: String,
				default: '隐私协议'
			}
		},
		data() {
			return {
				show: false
			};
		},
		watch: {
			visible(newVal) {
				this.show = newVal
			}
		},
		created() {
			this.show = this.visible
		},
		methods: {
			openModal() {
				this.show = true
			},
			confirm() {
				this.show = false
				
				this.$emit("update:visible", false)
				this.$emit("update:is-agree", true)
				this.$emit("success")
			},
			cancel() {
				this.show = false
				this.$emit("update:visible", false)
				this.$emit("update:is-agree", false)
				this.$emit("cancel", false)
			}
		}
	}
</script>

<style lang="scss" scoped>
.comfirm-box {
    text-align: center;
    padding: 60rpx 0 70rpx 0;
}

</style>